/**
 * 自定义时间区间选择组件，支持日期区间和月份区间
 * by zhangxinyue
 * create 2020-09-04
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Tooltip, Form } from 'antd';
import { FormItemLayout, NoLableLayout } from '../formPub';
import SimpleRangeDateC from './simpleRangeDateC';

class RangeDateC extends Component {
  // props默认值
  static defaultProps = {
    title: '日期区间',
    helper: '',
    onChange: () => {},
    dataType: 'date', // 默认是年月日类型
    hasDataBD: '',
    hasDataED: '',
    disabled: false,
    onRef: () => {}, // 本组件的引用
    formItemLayout: FormItemLayout,
    disableFuture: true, // 默认禁用今天之后的时间
    required: false, // 是否必填
    labalWrap: false, // 默认title不换行
    colon: false,
  };

  state = {
    showError: false, // 是否展示必填消息
  };

  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef(this);

    const init = this.props.initialValue;
    // eslint-disable-next-line react/no-did-mount-set-state
    this.setState({
      beginDate: init ? init[0] : undefined,
      endDate: init ? init[1] : undefined,
    });
  }

  static getDerivedStateFormProps(props, state) {
    const init = state.initialValue ? JSON.stringify(state.initialValue) : '';
    const initN = props.initialValue ? JSON.stringify(props.initialValue) : '';

    if (init !== initN) {
      return {
        beginDate: props.initialValue ? props.initialValue[0] : undefined,
        endDate: props.initialValue ? props.initialValue[1] : undefined,
      };
    }
    return null;
  }

  // 非初始化状态下更改时间(供父组件调用) [开始日期, 结束日期]
  setDate = (value) => {
    this.setState(
      {
        beginDate: value ? value[0] : undefined,
        endDate: value ? value[1] : undefined,
      },
      () => {
        this.state.SimpleRangeDateC?.setDate(value && value[0], value && value[1]);
      },
    );
  };

  // 外界调用了form的resetFields方法，需同时调用该方法
  reset = () => {
    this.state.SimpleRangeDateC.reset();
  };

  // 响应开始日期变更
  startOnChange = (e) => {
    this.setState({
      beginDate: e,
    });
    if (this.state.beginDate && e) {
      this.setState({
        showError: false,
      });
    }
    // 抛出时间变更事件
    this.props.onChange([e, this.state.endDate]);
  };

  // 响应结束日期变更
  endOnChange = (e) => {
    this.setState({
      endDate: e,
    });
    if (this.state.beginDate && e) {
      this.setState({
        showError: false,
      });
    }
    // 抛出时间变更事件
    this.props.onChange([this.state.beginDate, e]);
  };

  // 提交时判断是否展示必填选项
  hasRequired = () => {
    if (!this.state.beginDate || !this.state.endDate) {
      this.setState({
        showError: true,
      });
    }
  };

  render() {
    const {
      styleRow,
      helper,
      title,
      message,
      allowClear,
      required,
      dataType,
      form,
      dataIndex,
      initialValue,
      disabled,
      formItemLayout,
      hasDataBD,
      hasDataED,
      disableFuture,
      labalWrap,
      colon,
    } = this.props;
    dataIndex === ['start6', 'end6'] && console.log(initialValue);
    return (
      <Form.Item
        labelCol={title ? formItemLayout.labelCol : NoLableLayout.labelCol}
        wrapperCol={title ? formItemLayout.wrapperCol : NoLableLayout.wrapperCol}
        className={`${this.state.showError ? 'has-error' : ''} ${labalWrap ? 'rangDateCForWarp' : 'rangDateC'} `}
        label={
          title ? (
            helper ? (
              <span className={required ? 'errorStar' : ''}>
                {title}&nbsp;
                <Tooltip title={helper}>
                  <QuestionCircleOutlined />
                </Tooltip>
              </span>
            ) : (
              <span className={required ? 'errorStar' : ''}>{title}</span>
            )
          ) : undefined
        }
        colon={colon}
      >
        <SimpleRangeDateC
          form={form} // form对象
          startIndex={dataIndex && dataIndex[0]} // 开始时间唯一标识符
          endIndex={dataIndex && dataIndex[1]} // 结束时间唯一标识符
          startInitial={initialValue && initialValue[0]} // 开始时间初始默认值（只适用于初始化赋值）
          endInitial={initialValue && initialValue[1]} // 结束时间初始默认值（只适用于初始化赋值）
          disableStart={hasDataBD} // 设置当前的开始时间不能早于该值，为''时，不将该值用于计算开始时间的禁用范围
          disableEnd={hasDataED} // 设置当前的结束时间不能晚于该值，为''时，不将该值用于计算结束时间的禁用范围
          startOnChange={this.startOnChange} // 开始时间变化时的回调
          endOnChange={this.endOnChange} // 结束时间变化时的回调
          allowClear={allowClear} // 是否显示清除按钮
          disabled={disabled}
          dataType={dataType} // 日期类型
          onRef={(ref) => {
            this.setState({ SimpleRangeDateC: ref });
          }} // 时间区间组件的ref，可调用子组件方法
          style={styleRow ? { display: 'flex', width: '100%', ...styleRow } : { display: 'flex', width: '100%' }} // 宽度按layout属性同比算的
          disableFuture={disableFuture}
        />
        {required && this.state.showError ? <div className={'errorDateMsg'}>{message || '请选择日期'}</div> : null}
      </Form.Item>
    );
  }
}

// props类型
RangeDateC.propsTypes = {
  labalWrap: PropTypes.bool, // 支持标题换行
  form: PropTypes.object, // form对象
  title: PropTypes.string, // 显示名称
  dataIndex: PropTypes.array, // Form识别的Item ID [开始日期, 结束日期]
  initialValue: PropTypes.array, // 初始默认值 [开始日期, 结束日期]  格式为：moment('YYYY-MM-DD')
  onChange: PropTypes.func, // 开始日期或结束日期变化时的回调
  helper: PropTypes.array, // 提示帮助信息 [开始日期, 结束日期]
  dataType: PropTypes.string, // 日期控件类型（年月日类型：date，年月类型：month）
  hasDataBD: PropTypes.object, // 禁选起始日期（全部禁用传null，不需要禁用，则不传）
  hasDataED: PropTypes.object, // 禁选结束日期（全部禁用传null，不需要禁用，则不传）
  onRef: PropTypes.func, // 本组件的引用（可用来父组件调用内部方法）
  disabled: PropTypes.bool,
  formItemLayout: PropTypes.object, // 布局
  disableFuture: PropTypes.bool, // 是否禁用今天之前的时间
  required: PropTypes.bool, // 是否必填
  message: PropTypes.string, // 必填提示消息
  allowClear: PropTypes.bool, // 是否显示清除
  colon: PropTypes.bool, // 显示冒号
};

export default RangeDateC;
